<template>
  <van-nav-bar left-text="填写订单" left-arrow @click-left="onClickLeft" />
  <div class="container-order">
    <div class="address-card position">
      <div class="top-line"></div>
      <div class="order-address flex">
        <div class="address-content">
          <div class="info flex">
            <van-tag color="red" plain style="margin-right: 5px">默认</van-tag>
            <text>胡图图 </text>
            <text>18840684656</text>
          </div>
          <div class="detail">翻斗大街翻斗花园二号楼1202室</div>
        </div>
        <div class="select-address">
          <van-icon name="arrow" color="#bbb" size="22px" />
        </div>
      </div>
    </div>

    <div class="payment position">
      <!-- 支付方式 -->
      <div class="time-wraper flex">
        <van-checkbox checked="true"></van-checkbox>
        <img src="../../../static/images/payment_wxzf.png" />
        <div class="title">支付方式</div>
      </div>
    </div>

    <div class="discount position">
      <van-card
        v-for="(item, index) in cartList.cartInfoList"
        :key="index"
        :num="item.skuNum"
        :price="item.skuPrice"
        :desc="item.skuName"
        :title="item.skuName"
        :thumb="item.imgUrl"
      />
    </div>

    <div class="discount position">
      <van-cell title="优惠券：暂无可用" is-link />
      <van-cell title="红包" is-link />
    </div>

    <div class="discount1 position">
      <van-cell title="商品总价" :value="'￥' + allPrice" />
      <van-cell title="邮费" value="￥0.00" />
    </div>
    <van-checkbox class="position isAgree" v-model="agree" shape="square"
      >我已同意 《网易严选服务协议》</van-checkbox
    >

    <van-dialog
      v-model:show="show"
      title="支付订单"
      show-cancel-button
      @confirm="confirmButton"
      @cancel="concelButton"
    >
      <div class="dialog">
        <qrcode-vue :value="payInfo?.codeUrl" />
      </div>
    </van-dialog>
    <van-submit-bar
      :price="allPrice * 100"
      button-text="提交订单"
      @submit="onSubmit"
      :disabled="!agree"
    />
  </div>
</template>

<script lang="ts" setup>
import { reqCartList, reqTradeInfo, reqSubmitOrder, reqPayInfo, reqPayStatus } from '@/api/cart'
import { computed, onMounted, reactive, ref } from 'vue'
import type { ICartList, IDetailArrayList, IPayInfo } from '@/types/cart'
import QrcodeVue from 'qrcode.vue'
import { showToast } from 'vant'
import router from '@/router'
const cartList = reactive<ICartList>({
  cartInfoList: []
})
const show = ref(false)
//#region 获取商品列表
const getCartList = async () => {
  const res = await reqCartList()
  if (res.code === 200) {
    const { cartInfoList } = res.data[0]
    cartList.cartInfoList = cartInfoList.filter((item) => {
      return item.isChecked === 1
    })
  }
}
onMounted(async () => {
  await getCartList()
  // console.log('---', cartList.cartInfoList)
  await getTradeInfo()
})
//#endregion

//#region 总金额
const allPrice = computed(() => {
  let allPrice = 0
  cartList.cartInfoList.forEach((item) => {
    allPrice += item.skuNum * item.cartPrice
  })
  return allPrice
})
//#endregion
const onClickLeft = () => history.back()
const agree = ref(true)
let orderId = ref('')
let timeId = 0
const onSubmit = async () => {
  clearInterval(timeId)
  show.value = true
  // 组织成后端需要使用的数据格式
  const params = {
    tradeNo: tradeNo.value,
    consignee: '胡图图',
    consigneeTel: '18840684656',
    deliveryAddress: '陕西省西安市地球村翻斗花园',
    paymentWay: 'ONLINE',
    orderComment: 'peace & love',
    orderDetailList: detailArrayList.value as IDetailArrayList[]
  }
  const res = await reqSubmitOrder(params)
  if (res.code === 200) {
    orderId.value = res.data as string
  }
  await getPayInfo()

  try {
    timeId = setInterval(async () => {
      const res = await reqPayStatus(orderId.value)
      if (res.code === 200) {
        console.log(111)
        clearInterval(timeId)
        show.value = false
        showToast('支付成功!')
        router.push('/cart')
      } else {
        clearInterval(timeId)
        show.value = false
        showToast('支付失败!')
      }
    }, 1000)
  } catch (error) {
    clearInterval(timeId)
    console.log(error)
  }
}

const confirmButton = async () => {
  try {
    const res = await reqPayStatus(orderId.value)
    if (res.code === 200) {
      clearInterval(timeId)
      showToast('支付成功!')
      router.push('/cart')
    } else {
      clearInterval(timeId)
      showToast('支付失败!')
    }
  } catch (error) {
    clearInterval(timeId)
  }
}

const concelButton = async () => {
  clearInterval(timeId)
  showToast('您尚未支付!')
}

//#region 获取支付信息
let payInfo = ref<IPayInfo>()
const getPayInfo = async () => {
  const res = await reqPayInfo(orderId.value)
  if (res.code === 200) {
    payInfo.value = res.data
  }
}
//#endregion

//#region 获取交易页面的数据
let tradeNo = ref('')
let detailArrayList = ref<IDetailArrayList[]>([])
const getTradeInfo = async () => {
  const res = await reqTradeInfo()
  // console.log(res.data.tradeNo)

  if (res.code === 200) {
    tradeNo.value = res.data.tradeNo
    detailArrayList.value = res.data.detailArrayList
  }
}
//#endregion
</script>

<script lang="ts">
export default {
  name: 'OrderPay'
}
</script>

<style scoped>
.container-order {
  box-sizing: border-box;
  background-color: #f3f3f3;
  width: 100%;
  position: absolute;
  top: 46px;
}
.flex {
  display: flex;
}
.position {
  margin: 6px;
}
.order-address {
  justify-content: space-between;
  padding: 6px 15px;
}
.address-card .order-address {
  display: flex;
  align-items: center;
  height: 60px;
  font-size: 28px;
  font-weight: normal;
  color: #999999;
  line-height: 16px;
}
.address-card .order-address .detail {
  /* overflow: hidden; */
  /* text-overflow: ellipsis; */
  /* display: -webkit-box; */
  font-size: 18px;
  font-weight: bold;
  color: #333;
  line-height: 16px;
  margin: 8px 0;
}
.address-card .order-address .info {
  height: 20px;
  font-size: 16px;
  font-weight: normal;
  color: #333333;
  line-height: 20px;
}
.address-card {
  background-color: #fff;
  border-radius: 14px;
  overflow: hidden;
}
.select-address {
  width: 100%;
  width: 30px;
  display: flex;
  justify-content: center;
  align-content: center;
}
.address-card .top-line {
  width: 100%;
  height: 6px;
  background-color: #fff;
  background-image: url(https://cdn-we-retail.ym.tencent.com/miniapp/order/stripe.png);
  background-repeat: repeat-x;
  display: block;
}

.goods-wraper,
.payment {
  background-color: white;
  padding: 16px 16px;
  margin-top: 20px;
  border-radius: 14px;
}
.payment img {
  width: 26px;
  margin-left: 10px;
  margin-right: 6px;
}
.time-wraper .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  color: #333333;
}
.time-wraper {
  align-items: center;
}
.discount {
  background-color: white;
  padding: 5px 10px;
  margin-top: 20px;
  border-radius: 14px;
}
.discount1 {
  background-color: white;
  padding: 5px 10px;
  margin-top: 20px;
  border-radius: 14px;
}

.van-dialog img {
  width: 150px;
}
.dialog {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  margin: 10px 0px;
}
.van-submit-bar {
  position: relative;
}
.isAgree {
  margin-top: 10px;
  font-size: 13px;
}
</style>
